<!--<template>-->
<!--  <div class="_wz_video">-->
<!--    <video id="videojs-flvjs-player" class="video-js vjs-default-skin vjs-big-play-centered" muted ref="videoPlayer">-->

<!--    </video>-->
<!--  </div>-->
<!--</template>-->
<!--<script>-->
<!--  import Vue from 'vue'-->


<!--  export default {-->
<!--    props: [-->
<!--      "materialData",//课件所有数据-->
<!--      "old",//判断使用新的播放  还是mp4播放-->
<!--    ],//接收来自父组件的数据-->
<!--    data() {-->
<!--      return {-->
<!--        player: null,-->
<!--      }-->
<!--    },-->
<!--    beforeCreate() {//beforeCreate创建前状态-->

<!--    },-->
<!--    created() {//created创建完毕状态-->

<!--    },-->
<!--    beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程-->

<!--    },-->
<!--    mounted() {//mounted 挂载结束状态-->
<!--      this.initVideo();-->
<!--    },-->
<!--    methods: {//执行的方法-->
<!--      initVideo() {-->
<!--        let that = this;-->
<!--        that.player = that.$video('videojs-flvjs-player', {-->
<!--          autoplay: false, // 自动播放-->
<!--          controls: true, //是否显示底部控制栏-->
<!--          width: "100%", //-->
<!--          height: "100%", //-->
<!--          //		aspectRatio: "16:9", //视频比例-->
<!--          loop: false, //是否循环播放-->
<!--          muted: false, //设置默认播放音频-->
<!--          /*-->
<!--               *	auto:立即加载视频（如果浏览器支持它）。一些移动设备将不会预加载视频，以保护用户的带宽/数据使用率。这就是为什么这个值被称为“自动”，而不是更确凿的东西-->
<!--               *	metadata:只加载视频的元数据，其中包括视频的持续时间和尺寸等信息。有时，元数据会通过下载几帧视频来加载。-->
<!--               *	none:-->
<!--               */-->
<!--          preload: "none", //-->
<!--          poster: "/static/img/videos.png", //开始播放前显示的图像的URL-->
<!--          fluid: false, // 是否自适应布局-->
<!--          language: 'zh-CN', //中文-->
<!--          controlBar: {-->
<!--            children: {-->
<!--              PlayToggle: true, //播放 暂停-->
<!--              muteToggle: true, //声音-->
<!--              VolumeControl: true, //声音-->
<!--              ProgressControl: true, //进度控制-->
<!--              RemainingTimeDisplay: true, //重排时间显示-->
<!--            }-->
<!--          },-->
<!--          techOrder: ['html5'],-->
<!--//        flvjs: {-->
<!--//          mediaDataSource: {-->
<!--//            isLive: false,-->
<!--//            cors: true,-->
<!--//            withCredentials: false,-->
<!--//          },-->
<!--//        },-->
<!--          sources: [{-->
<!--            src: (!!that.old) ? that.apiUrl.videoUrl + that.materialData.mp4Url : that.apiUrl.videoUrl + that.materialData.videoSdUrl,-->
<!--            type: (!!that.old) ? "video/mp4" : 'application/x-mpegURL'-->
<!--          }],-->
<!--//        sources: [{-->
<!--//          src: "https://xdbj.net.cn/resource/FileStore/training_material/material_m3u8/第八课 车辆日常安全检查1080P/第八课 车辆日常安全检查.m3u8",-->
<!--//          type: 'application/x-mpegURL'-->
<!--//        }],-->
<!--        }, function onPlayerReady() {-->
<!--          if (that.old) {-->
<!--            return;-->
<!--          }-->
<!--          //videoSdUrl  标清-->
<!--          //videoHdUrl  高清-->
<!--          //videoFdUrl  超清-->
<!--          //materialData-->
<!--          let html = '<div><button class="vjs-control" @click="videoSwitching(\'bz\')">标清</button>';-->
<!--          if (!!that.materialData.videoHdUrl) {-->
<!--            html += '<button class="vjs-control" @click="videoSwitching(\'gq\')">高清</button>';-->
<!--          }-->
<!--          if (!!that.materialData.videoFdUrl) {-->
<!--            html += '<button class="vjs-control" @click="videoSwitching(\'cq\')">超清</button>';-->
<!--          }-->
<!--          html += '</div>';-->

<!--          let MyComponent = Vue.extend({-->
<!--//          template: '<div><button class="vjs-control" @click="videoSwitching(\'bz\')">标准</button>' +-->
<!--//          '<button class="vjs-control" @click="videoSwitching(\'gq\')">高清</button>' +-->
<!--//          '<button class="vjs-control" @click="videoSwitching(\'cq\')">超清</button></div>',-->
<!--            template: html,-->
<!--            methods: {-->
<!--              videoSwitching(type) {-->
<!--                let time = that.player.currentTime();-->
<!--                if (type == "bz") {-->
<!--                  //标准-->
<!--                  that.player.src({-->
<!--                    src: that.apiUrl.videoUrl + that.materialData.videoSdUrl,-->
<!--                    type: "application/x-mpegURL"-->
<!--                  });-->
<!--                } else if (type == "gq") {-->
<!--                  //高清-->
<!--                  that.player.src({-->
<!--                    src: that.apiUrl.videoUrl + that.materialData.videoHdUrl,-->
<!--                    type: "application/x-mpegURL"-->
<!--                  });-->

<!--                } else if (type == "cq") {-->
<!--                  //超清-->
<!--                  that.player.src({-->
<!--                    src: that.apiUrl.videoUrl + that.materialData.videoFdUrl,-->
<!--                    type: "application/x-mpegURL"-->
<!--                  });-->
<!--                }-->
<!--                setTimeout(function () {-->
<!--                  that.player.currentTime(parseInt(time));-->
<!--                  that.player.play();-->
<!--                }, 100);-->
<!--              },-->
<!--            }-->
<!--          });-->
<!--          let component = new MyComponent().$mount();-->
<!--          document.getElementsByClassName('vjs-control-bar')[0].appendChild(component.$el);-->

<!--          //判断视频是否播放-->
<!--          let oneTime = true;-->
<!--          this.on('ended', function () {-->
<!--            //结束播放-->
<!--            oneTime = true;-->
<!--          });-->
<!--        });-->
<!--      },-->

<!--    },-->
<!--    watch: {//监听-->

<!--    },-->

<!--    beforeUpdate() {//beforeUpdate 更新前状态-->

<!--    },-->
<!--    updated() {//updated 更新完成状态-->

<!--    },-->
<!--    beforeDestroy() {//beforeDestroy 销毁前状态-->
<!--    },-->
<!--    destroyed() {//destroyed 销毁完成状态-->
<!--      this.player.dispose()-->
<!--    }-->
<!--  }-->
<!--</script>-->
<!--<style>-->
<!--  .vjs-poster {-->
<!--    background-image: url("../../../assets/videos.png") !important;-->
<!--  }-->
<!--</style>-->
<!--<style lang="less">-->

<!--  ._wz_video {-->
<!--    width: 100%;-->
<!--    height: 100%;-->

<!--    .video-js {-->
<!--      width: 100%;-->
<!--      height: 100%;-->
<!--      overflow: hidden;-->
<!--    }-->

<!--    .video-js {-->
<!--      /*transform: rotate(90deg);*/-->
<!--    }-->

<!--    #danmu {-->
<!--      position: absolute;-->
<!--      top: 0;-->
<!--      bottom: 36px;-->
<!--      left: 0;-->
<!--      right: 0;-->
<!--      z-index: 99;-->
<!--      width: 100% !important;-->
<!--      height: calc(100% - 36px) !important;-->
<!--    }-->

<!--    .vjs-big-play-centered .vjs-big-play-button {-->
<!--      z-index: 101;-->
<!--    }-->
<!--  }-->

<!--</style>-->
